<template>
  <div class="">
   <Row>
        <Col span="12" class="title clearfix">胚胎移植</Col>   
   </Row>
    <div class="line"></div>
   	<div class="MainBox">

    <Form :model="EmbryoMove" label-position="left" :label-width="50">
       <Row>
            <div class="clearfix" >
              <p style="float:left; margin-bottom:10px; margin-top:5px" >卵胚移植</p>
              <Button type="ghost" 
                  style="float:right; margin-bottom:10px" 
                  class="pinkButton" 
                  size="small"
                  @click="openItem(-1)">新增</Button>
            </div>

          </Row>
      <Table border :columns="columns" :data="EmbryoMove.data" size="small" ></Table>

      

      <Modal v-model="detailVisible" title="新增/修改卵胚移植">
              
           <!--  <freezing-detail ref="freezingdetail" 

            v-bind:FreezingStorage = "FreezingStorage"></freezing-detail> -->

            <EmbryoMove-detail ref="freezingdetail"
            v-bind:EmbryoMove = "EmbryoMove">
            ></EmbryoMove-detail>
                <div slot="footer">
                  <Button type="ghost" class="pinkButton" size="small" @click="updateItem" >保存</Button>
                  <Button type="ghost" size="small" @click="cancelDetail">取消</Button>
              </div>
      </Modal>
         
    </Form>
	   
	</div>
  </div>
</template>
<script>
import UploadHelper from '../components/UploadHelper'
import SubmitButton  from "../components/SubmitButton"
import Store from '../store'

import EmbryoMoveDetail from '../components/EmbryoMoveDetail'
import api from '../js/axios-module'

export default {

  data () {
    return {
    	EmbryoMove:{
        // data:[]
    	},
      changeIndex:-1,
      bodyType:"",
      columns: [
            { width:'70px',
                title: '日期',
                key: 'date'
            },
            {
                title: '卵胚情况',
                key: 'picture',

                render: (h, params) => {
                  let children = [];

                 var item = this.EmbryoMove.data[params.index];
                  children.push(h('p', {},"卵胚性别:"+item.gender )) 
                  children.push(h('p', {},"胚胎个数:"+item.number )) 
                  children.push(h('p', {},"卵胚等级:"+item.grade )) 
              
                return h('div', {},children);
                }
            },
            { width:'70px',
              key:"detail",
                title: '查看详情',
                align: 'center',
                render: (h, params) => {
                  let children = [];
                  children.push(h('Button', {
                            props: {
                                type: 'ghost',
                                size: 'small'
                            },
                            class:['pinkButton'],
                            style: {
                              'margin-Top': '5px',
                                'margin-Bottom': '5px',
                                
                            },
                            on: {
                                click: () => {
                                   // alert('查看详细'+params.index);
                                   // console.log(params)
                                   this.openItem(params.index);
                                   
                                }
                            }
                        }, '查看'));


                    return h('div', {},children);
                }
            }
        ],

        detailVisible:false

      
       
    }
  },components:{UploadHelper,SubmitButton,EmbryoMoveDetail},
  created: function () {
      var item = Store.fetch(Store.EMBRYOMOVE_KEY)
      if (item.data !=null) {
        this.EmbryoMove = item
      }else{
        item.data = [];
         this.EmbryoMove = item  
      }   
  },
  methods: {
     getData: function () {
      api.getEmbrosMove().then(response => {


          var list = response.data.data.embryo;
          var pic = response.data.data.resource;

          for (var i = list.length - 1; i >= 0; i--) {


              var item = list[i];

               var pisList = new Array();

              for(var ss in pic[item['id']]){

                 var cell = pic[item['id']][ss];
                 pisList.push({
                    url:cell.url,
                    created_at:cell.created_at,
                    name:cell.url
                 })

              }
    
              this.EmbryoMove.data.push({
                "date":item.date,
                // "dateStr":item.date,
                'gender':item.embryosex,
                'grade':item.embryograde,
                'number':item.embryonumber,
                'gender':item.embryosex,
                "id":item.id,
                'innerlist':pisList
              })

          }
       
      },err=>{
        this.$Message.error('获取数据失败,请稍后再试');
      })

    },
    openItem:function(number){

      this.detailVisible = true;
       this.$refs.freezingdetail.openItem(number);
       this.changeIndex = number;
    },updateItem:function(){
    
      this.detailVisible = false;
      this.$refs.freezingdetail.updateItem(this.changeIndex)
       this.changeIndex = -1;
    },
    cancelDetail:function(){
    this.detailVisible = false;
   },
    submit:function(){
      console.log("submit")
    },
    cancel:function(){
      console.log("cancel")
    },handleSuccess:function(res,flie,selectType,type){

      this.EmbryoMove.innerlist.push({
          'name': flie.url,
          'url': flie.url
        
      })
    }

  },watch:{
        EmbryoMove:{
          handler:function(embryoMove){

              // Store.save(this.EmbryoMove,Store.EMBRYOMOVE_KEY);
          },
          deep:true
        }  

  },
    mounted: function () {
    this.getData()
  },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>   /*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */

</style>